<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 720px;
            height: 200px;
            position: fixed;
            /* calc() 用于计算 */
            left: calc(50% - 360px);
            /* left: 50%;
            transform: translateX(-50%); */
            border: 1px solid #000;
        }
        .textBox{
            position: absolute;
            top: 0;
            left: 0;
            width: 720px;
            height: 200px;
            font-size: 24px;
            font-weight: bold;
            /* 控制文字水平居中 */
            text-align: center;
            /* 文字所占据的高度为容器的高度,即居中了 */
            line-height: 200px;
            z-index: -1;
        }

    </style>
</head>
<body>
    <div id="box">
        <div class="textBox" id="text">谢谢惠顾</div>
        <canvas id="canvasBox"></canvas>
    </div>


    <script>
        const box = document.getElementById('box')
        // 通过id选择器获取
        const canvas = document.getElementById('canvasBox')
        canvas.width = 720
        canvas.height = 200
        // 创建一个画布
        const ctx = canvas.getContext('2d')
        // 先将画布设置成透明底色
        ctx.fillStyle = 'transparent'
        // 用这个颜色从0,0坐标到320,200坐标
        ctx.fillRect(0,0,720,200)
        ctx.fillStyle = 'gray'
        ctx.fillRect(0,0,720,200)
        ctx.globalCompositeOperation = 'destination-out';

        // 鼠标摁住不放 在box上滑动 擦除颜色
        // 整一个开关变量，初始为0，鼠标摁下赋值为1，放开赋值为0
        let flag = 0
        // 鼠标摁下
        canvas.addEventListener('mousedown',()=>{
            flag = 1
        })
        // 鼠标放开
        canvas.addEventListener('mouseup',()=>{
            flag = 0
        })
        // 鼠标移动
        // 当用户鼠标一直是摁住的状态
        canvas.addEventListener('mousemove',(e)=>{
            // 阻止鼠标的其他行为
            e.preventDefault()
            if (flag === 1){
                // 擦除
                // 准备一个正方形的擦块
                // 获取鼠标摁下那一刻的坐标
                const x = e.x - box.offsetLeft
                const y = e.y - box.offsetTop
                ctx.beginPath() // 落笔
                console.log(ctx.beginPath())
                // 根据当前鼠标的位置生成一个20，20的正方形擦块
                // ctx.rect()方法创建的矩形是以当前绘图上下文的坐标原点为参考的
                // 默认情况下，坐标原点位于画布的左上角
                ctx.rect(x,y,20,20)
                ctx.fill()
            }
        })


        // 控制textBox容器中的文本内容是随机的
        // 先要有个存放文本内容的容器
        let ran = ['谢谢惠顾', '一百万','五十万','竹篮打水'] 
        // 通过随机的方式取出文本内容
        let text = ran[Math.floor(Math.random()*ran.length)]
        console.log(text)
        // 获取textBox
        const textBox = document.getElementById('text')
        console.log(text)
        textBox.innerText = text

    </script>
</body>
</html>